import React, { Component } from "react";
import { View, Text, Image, StyleSheet, Animated, Modal, TouchableOpacity, Easing,ScrollView} from "react-native";
import {width,height} from "../../util/apdater_util";
import PropTypes from "prop-types";

let _this=null
export default class MenuDownView extends Component{
  constructor(props) {
    super(props);
    _this=this;
    this.state={
      show:false,
      content:null,
      replaceContent:null,
      offY:0,
      popHeight:0,
      scaleYAnimated:new Animated.Value(0),
      callback:null
    }
  }

  componentDidMount() {
    _this=this
  }

  showMenu(options){
    _this.setState({
      show:true,
      content:options.content?options.content:(<Text>内容</Text>),
      replaceContent:null,
      offY:options.offY?options.offY:0,
      popHeight:options.popHeight?options.popHeight:0,
      callback:options.callback
    },_this.in())

  }

  in(){
    _this.state.scaleYAnimated.setValue(0);
    Animated.timing(_this.state.scaleYAnimated,{
      easing: Easing.linear,
      toValue:1,
      duration:150
    }).start()
  }

   hideMenu(){
    _this.hiddenPopView()
  }

  reload(options){
    console.log(options)
    if(this.state.content){
      _this.setState({replaceContent:options.content,content:null})
    }
    else{
      _this.setState({replaceContent:null,content:options.content})
    }
  }

  hiddenPopView(){
    _this.state.scaleYAnimated.setValue(1);
    Animated.timing(_this.state.scaleYAnimated,{
      easing: Easing.linear,
      toValue:0,
      duration:150
    }).start(()=>{
      if(_this.state.callback){
        _this.state.callback()
      }
      _this.setState({show:false})
    })
  }

  render() {
    if(this.state.show){
      const scaleY = this.state.scaleYAnimated.interpolate({
        inputRange: [0, 1],
        outputRange: [0, this.state.popHeight]
      })
      return (
        <Modal transparent={true} visible={this.state.show}  animationType={'fade'} style={{
          position: "absolute",
          left: 0,
          top:0,
          width: width,
          height: height,
        }}>
          <TouchableOpacity style={[styles.PopupPage,{top:this.state.offY,height:height-this.state.offY}]} activeOpacity={1} onPress={this.hiddenPopView.bind(this)}>
            <View></View>
          </TouchableOpacity>
          <Animated.View style={[styles.popupBox,{top:this.state.offY,height:scaleY}]}>
            {this.state.content}
            {this.state.replaceContent}
          </Animated.View>
        </Modal>
      )
    }
    else{
      return <View></View>
    }
  }
}

const styles=StyleSheet.create({
  PopupPage:{
    position: "absolute",
    left: 0,
    backgroundColor: "rgba(0,0,0,0.4)",
    width: width,
    justifyContent: "center",
    alignItems: "center"
  },
  popupBox:{
    position: 'absolute',
    left: 0,
    width:width,
    backgroundColor: '#FCFCFC'
  }
})
